<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div class="layui-container">
    <div class="layui-form">
        <div class="layui-input-inline">
            <input type="text" placeholder="根据商品名搜索" class="layui-input" id="mytitle">
        </div>
        <div class="layui-input-inline">
            <select id="mytype">
                <option value="">不限子类</option>
                <option th:each="type:${typeList}" th:value="${type.id}" th:text="${type.name}"></option>
            </select>
        </div>
        <div class="layui-input-inline">
            <select id="mystate">
                <option value="">不限状态</option>
                <option value="0">准备上架</option>
                <option value="1">上架</option>
                <option value="2">下架</option>
            </select>
        </div>
        <button class="layui-btn layui-btn-normal" id="find"><i class="layui-icon">&#xe615;</i> </button>
    </div>
    <table id="selectgoods" lay-filter="selectgoods"></table>
</div>


<script type="text/javascript">
    layui.use(['table','element','form','layer'], function() {
        var table = layui.table,
            element = layui.element,
            form = layui.form,
            layer = layui.layer,
            $ = layui.$;

        //页面初始化
        form.render();

        /**
         * 商品表格
         */
        table.render({
            elem: '#selectgoods'
            , url: '/goods/goodsList' //数据接口
            , page: true //开启分页
            , limit: 5
            , limits: [5]
            , index:110
            , singleSelect:true
            , cols: [
                [ //表头
                      {checkbox: true,width: '5%' ,fixed: 'left'}
                    , {field: 'id', title: 'ID', width: '5%', sort: true}
                    , {field: 'name', title: '商品', width: '15%'}
                    , {field: 'title', title: '标题', width: '20%'}
                    , {field: 'price', title: '价格', width: '15%', sort: true}
                    , {field: 'num', title: '库存数', width: '15%', sort: true}
                    , {field: 'saleNum', title: '销售数', width: '15%', sort: true}
                    , {field: 'collectionNum', title: '收藏数', width: '10%', sort: true}
                ]
            ]
        });

        /**
         * 多条件查询
         */
        $("#find").click(function () {
            reloadTable();
        })

        function reloadTable() {
            table.reload('selectgoods',{
                where:{
                    name: $("#mytitle").val()
                    ,goodsTypeId: $("#mytype").val()
                    ,state: $("#mystate").val()
                }
            })
        }

    })
</script>


</body>
</html>